<template>
  <div>
    <div class="topgoods">
      <p class="goodnum">小店当前会员数 : {{goodNum}}</p>
      <el-input placeholder="输入手机号搜索"
        v-model="mobile"
        clearable
        size='small'
        class="goodsname">
        <i slot="suffix"
          class="el-input__icon el-icon-search"
          @click="searchGoods"></i>
      </el-input>
      <el-input placeholder="输入会员id搜索"
        v-model="id"
        clearable
        size='small'
        class="goodsname">
        <i slot="suffix"
          class="el-input__icon el-icon-search"
          @click="searchGoods"></i>
      </el-input>
    </div>
    <div class="record_line"></div>

    <el-table :data="tableData"
      style="width:100%"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor">

    
      <el-table-column prop="id"
        label="会员id"></el-table-column>
        <el-table-column prop="username"
        label="会员昵称"
        width="160"></el-table-column>
      <el-table-column prop="realname"
        label="会员姓名"></el-table-column>
      <el-table-column prop='gender' label='性别'></el-table-column>
      <el-table-column prop='birth' label='生日'></el-table-column>
      <el-table-column prop='mobile' label='手机号'></el-table-column>
      <el-table-column prop='consume_count' label='消费次数（本店）'></el-table-column>
      <el-table-column  label='账号状态'>
       <template slot-scope="scope">
         <p>{{scope.row.status_word}}</p>
         <!-- <p v-if='scope.row.status == 0'>已到期</p> -->
       </template>
      </el-table-column>
      <el-table-column prop='bind_time' label='激活时间（本店）'></el-table-column>
  
    </el-table>
<!-- 
   @size-change="handleSizeChange" -->
    <el-col :span="24">
      <div class="pagination">
        
        <el-pagination background
          @current-change="pageChange"
          :current-page="page"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
import {shopVipSearchData} from "@/api/shopdetail"
export default {
  props:['shopId'],
  data () {
    return {
      goodNum: 0,
      id: '',
      mobile:'',
      page:1,
      total:0,
      tableData: []
    }
  },
  mounted (){
     this.getshopVipSearchData(this.shopId)
  }, 
  watch: {
      shopId(newValue){
        if(newValue){
          this.getshopVipSearchData(this.shopId)
        }
      }
  },
  methods: {
    async getshopVipSearchData (shopId){
      var url = "page="+this.page+
                "&id="+this.id+
                "&mobile="+this.mobile
      let res = await shopVipSearchData(shopId,url)
      this.goodNum = res.data.vip_count
      this.tableData = res.data.list.data
      this.total = res.data.list.total
    },

    searchGoods(){
      this.page = 1
      this.getshopVipSearchData(this.shopId)
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },

    isUseActivityChange (id, e) {
      //更新成功后重新获取商品
      // this.getshoptypeopenorclose(id, e);
      console.log('id:' + id + ',e:' + e)
    },
      pageChange(page) {
      this.page = page;
      this.getshopVipSearchData(this.shopId)
    },
  }
}
</script>

<style lang="scss" scoped>
.topgoods {
  height: 30px;
  .goodnum {
    float: left;
    width: 200px;
  }
  .goodsname {
    float: right;
    width: 200px;
    margin-top: -5px;
  }
}
.record_line {
  margin: 10px 0;
  height: 1px;
  background-color: #e6e6e6;
}
.doing {
  color: blue;
}

.success {
  color: green;
}
.failure {
  color: red;
}
.operate_info {
  float: left;
}
.status—desc {
  float: right;
}
.pagination {
  float: right;
  margin-top: 15px;
}
</style>